<!-- 零件管理 -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="width: 100%">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="零件货号">
              <a-input
                placeholder="请输入零件货号"
                v-model:value="state.queryParam.partCode"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="text-align: right">
      <a-button @click="handleAdd" type="primary">新增</a-button>
      <a-button type="primary" @click="downloadTemplate()"
        >下载导入模版</a-button
      >
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary">导入</a-button>
      </a-upload>
      <a-button
        style="margin-left: auto"
        type="primary"
        @click="handleExportXls()"
        >导出</a-button
      >
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ state.selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="state.columns"
        :dataSource="state.dataSource"
        :pagination="state.ipagination"
        :loading="state.loading"
        :rowSelection="{
          fixed: true,
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无此图片</span
          >
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无此文件</span
          >
          <a-button
            v-else
            :ghost="true"
            type="primary"
            size="small"
            @click="uploadFile(text)"
          >
            下载
          </a-button>
        </template>
        <template #action="{ record }">
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="inputInventory(record)">入库</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除吗?"
              @confirm="() => handleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </div>

    <part-management-model
      ref="partModalForm"
      @ok="partModalFormOk"
    ></part-management-model>

    <part-input-model
      ref="inputModalForm"
      @ok="inputModalFormOk"
    ></part-input-model>
  </a-card>
</template>

<script setup>
import { ref, reactive, nextTick, computed, onMounted } from "vue";
import { message } from "ant-design-vue";
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import PartInputModel from "./PartInputModel.vue";
import {
  GetPartList,
  DeletePart,
  DownloadPartTemplate,
  ExportPart,
  ImportPart,
} from "../../wailsjs/go/controller/PartManagement";
import PartManagementModel from "./PartManagementModel.vue";

const modalForm = ref();
const partModalForm = ref();
const inputModalForm = ref();

const state = reactive({
  description: "零件管理",
  columns: [
    {
      title: "货号",
      align: "center",
      dataIndex: "partCode",
      width: 180,
    },
    {
      title: "SKU品名",
      align: "center",
      dataIndex: "skuName",
      width: 180,
    },
    {
      title: "库存位置",
      align: "center",
      dataIndex: "partLocation",
      width: 180,
    },
    {
      title: "一级分类",
      align: "center",
      dataIndex: "firstCategorize",
      width: 180,
    },
    {
      title: "二级分类",
      align: "center",
      dataIndex: "secondCategorize",
      width: 180,
    },
    {
      title: "零件尺寸",
      align: "center",
      dataIndex: "partSize",
      width: 180,
    },
    {
      title: "零件颜色",
      align: "center",
      dataIndex: "partColor",
      width: 180,
    },
    {
      title: "当前余量",
      align: "center",
      dataIndex: "inventory",
      width: 180,
    },
    {
      title: "库存要求",
      align: "center",
      dataIndex: "inventoryRequire",
      width: 180,
    },
    {
      title: "备注",
      align: "center",
      dataIndex: "remark",
      width: 280,
    },
    {
      title: "创建时间",
      align: "center",
      dataIndex: "createTime",
      width: 180,
    },
    {
      title: "更新时间",
      align: "center",
      dataIndex: "updateTime",
      width: 180,
    },
    {
      title: "操作",
      fixed: "right",
      align: "center",
      width: 200,
      key: "action",
      slots: {
        customRender: "action",
      },
    },
  ],
  dictOptions: {},
  queryParam: {},
  dataSource: [],
  ipagination: {
    current: 1,
    pageSize: 10,
    pageSizeOptions: ["10", "20", "30"],
    showTotal: (total, range) => {
      return `${range[0]}-${range[1]} 共 ${total} 条`;
    },
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
  },
  isorter: {
    column: "createTime",
    order: "desc",
  },
  filters: {},
  loading: false,
  selectedRowKeys: [],
  selectionRows: [],
  toggleSearchStatus: false,
  superQueryFlag: false,
  superQueryParams: "",
  autoSearch: true,
});

const importExcelUrl = computed(() => {
  return "http://localhost:10086/upload";
  // ... 省略计算属性实现
});

onMounted(() => {
  if (state.autoSearch) {
    loadData();
  }
  initDictConfig();
});

function initDictConfig() {
  // ... 初始化字典配置
}

function loadData(arg) {
  GetPartList(arg).then((res) => {
    console.log("GetPartList Res");
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
    state.dataSource = res["data"];
  });
}
//选择框事件
function onSelectChange(selectedRowKeys, selectionRows) {
  state.selectedRowKeys = selectedRowKeys;
  state.selectionRows = selectionRows;
}
//清空查询
function onClearSelected() {
  state.selectedRowKeys = [];
  state.selectionRows = [];
}
//查询
function searchQuery() {
  loadData(state.queryParam.partCode);
}
//高级查询
function superQuery() {
  superQueryModal.value.show();
}
//重置
function searchReset() {
  state.queryParam = {};
  loadData(state.queryParam.partCode);
}
function handleEdit(record) {
  partModalForm.edit(record);
  partModalForm.title = "编辑";
  partModalForm.disableSubmit = false;
}
function inputInventory(record) {
  inputModalForm.add(record);
  inputModalForm.title = "入库";
  inputModalForm.disableSubmit = false;
}
function handleAdd() {
  partModalForm.add();
  partModalForm.title = "新增";
  partModalForm.disableSubmit = false;
}
//删除
function handleDelete(record) {
  console.log("删除");
  console.log(record);
  DeletePart(record).then((res) => {
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
    loadData();
  });
}
//分页、排序、筛选变化时触发
function handleTableChange(pagination, filters, sorter) {
  //TODO 筛选
  if (Object.keys(sorter).length > 0) {
    state.isorter.column = sorter.field;
    state.isorter.order = "ascend" == sorter.order ? "asc" : "desc";
  }
  state.ipagination = pagination;
  loadData();
}
function partModalFormOk() {
  // 新增/修改 成功时，重载列表
  loadData();
}
function inputModalFormOk() {
  // 入库 成功时，重载列表
  loadData();
}
//下载导入模板
function downloadTemplate() {
  DownloadPartTemplate().then((res) => {
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
  });
}
function handleExportXls() {
  ExportPart().then((res) => {
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
  });
}
/* 导入 */
function handleImportExcel(info) {
  // let infoStr = JSON.stringify(info)
  if (info.file.status == "done") {
    ImportPart(info.file.response.data.dst).then((res) => {
      loadData();
    });
  }
}
</script>
<style scoped>
@import "../assets/less/common.less";
</style>
